<template>
  <div :class="['word-forum', theme]">
    <!-- 顶部导航栏 -->
    <header class="forum-header">
      <div class="header-container">
        <div class="logo">
          <span class="word-icon">📚</span>
          <h1>WordHub Forum</h1>
        </div>
        <nav class="main-nav">
          <router-link to="/Home">首页</router-link>
          <router-link to="/Forum">论坛</router-link>
          <router-link to="/MemorizationSkills">记忆技巧</router-link>
          <router-link to="/LearningResources">学习资源</router-link>
        </nav>
        <div class="user-controls">
          <button class="theme-toggle" @click="toggleTheme">
            {{ theme === 'light' ? '🌙' : '☀️' }}
          </button>
          <!-- <button class="btn primary" @click="showLogin = true">登录</button>
          <button class="btn outline">注册</button> -->
        </div>
      </div>
    </header>

    <!-- 主要内容区 -->
    <div class="forum-container">
      <!-- 侧边栏 -->
      <aside class="sidebar">
        <div class="sidebar-section">
          <h3>热门词汇分类</h3>
          <ul class="category-list">
            <li v-for="category in wordCategories" :key="category.id"
              :class="{ active: activeCategory === category.id }" @click="activeCategory = category.id">
              {{ category.name }}
              <span class="post-count">{{ category.count }}</span>
            </li>
          </ul>
        </div>

        <div class="sidebar-section">
          <h3>今日推荐词汇</h3>
          <div class="word-of-the-day">
            <div class="word-card" v-for="word in dailyWords" :key="word.id">
              <h4>{{ word.term }}</h4>
              <p class="definition">{{ word.definition }}</p>
              <div class="word-meta">
                <span class="level" :class="word.level">{{ word.level }}</span>
                <span class="examples">{{ word.examples }} 例句</span>
              </div>
            </div>
          </div>
        </div>
      </aside>

      <!-- 帖子列表 -->
      <main class="post-area">
        <div class="post-header">
          <h2>{{ activeCategoryName }} 讨论</h2>
          <button class="btn primary" @click="showNewPost = true">
            <span>✏️</span> 新建帖子
          </button>
        </div>

        <div class="post-filters">
          <div class="filter-group">
            <label>排序:</label>
            <select v-model="sortBy">
              <option value="newest">最新</option>
              <option value="popular">最热</option>
              <option value="votes">最多点赞</option>
            </select>
          </div>
          <div class="search-box">
            <input type="text" placeholder="搜索词汇或帖子..." v-model="searchQuery">
            <button class="search-btn">🔍</button>
          </div>
        </div>

        <div class="post-list">
          <article class="post" v-for="post in filteredPosts" :key="post.id">
            <div class="vote-section">
              <button class="vote-btn up" @click="votePost(post.id, 'up')">▲</button>
              <span class="vote-count">{{ post.votes }}</span>
              <button class="vote-btn down" @click="votePost(post.id, 'down')">▼</button>
            </div>
            <div class="post-content">
              <router-link :to="`/post/${post.id}`" class="post-title">
                <h3>{{ post.title }}</h3>
                <span class="word-tag" v-if="post.word">#{{ post.word }}</span>
              </router-link>
              <p class="post-excerpt">{{ post.excerpt }}</p>
              <div class="post-footer">
                <div class="author-info">
                  <img :src="post.author.avatar" class="avatar" alt="用户头像">
                  <span class="author-name">{{ post.author.name }}</span>
                </div>
                <div class="post-meta">
                  <span class="comments">💬 {{ post.comments }}</span>
                  <span class="time">{{ formatTime(post.date) }}</span>
                </div>
              </div>
            </div>
          </article>
        </div>

        <div class="pagination">
          <button class="btn outline" :disabled="currentPage === 1" @click="currentPage--">
            上一页
          </button>
          <span>第 {{ currentPage }} 页 / 共 {{ totalPages }} 页</span>
          <button class="btn outline" :disabled="currentPage >= totalPages" @click="currentPage++">
            下一页
          </button>
        </div>
      </main>
    </div>

    <!-- 登录模态框 -->
    <Modal :show="showLogin" @close="showLogin = false">
      <div class="auth-modal">
        <h2>欢迎回到 WordHub</h2>
        <form @submit.prevent="handleLogin">
          <div class="form-group">
            <input type="email" placeholder="邮箱" v-model="loginForm.email" required>
          </div>
          <div class="form-group">
            <input type="password" placeholder="密码" v-model="loginForm.password" required>
          </div>
          <button type="submit" class="btn primary full-width">登录</button>
        </form>
        <div class="auth-footer">
          <p>还没有账号? <a href="#" @click.prevent="showRegister = true">立即注册</a></p>
        </div>
      </div>
    </Modal>

    <!-- 注册模态框 -->
    <Modal :show="showRegister" @close="showRegister = false">
      <div class="auth-modal">
        <h2>加入 WordHub 社区</h2>
        <form @submit.prevent="handleRegister">
          <div class="form-group">
            <input type="text" placeholder="用户名" v-model="registerForm.username" required>
          </div>
          <div class="form-group">
            <input type="email" placeholder="邮箱" v-model="registerForm.email" required>
          </div>
          <div class="form-group">
            <input type="password" placeholder="密码" v-model="registerForm.password" required>
          </div>
          <button type="submit" class="btn primary full-width">注册</button>
        </form>
      </div>
    </Modal>

    <!-- 新建帖子模态框 -->
    <Modal :show="showNewPost" @close="showNewPost = false">
      <div class="post-modal">
        <h2>创建新帖子</h2>
        <form @submit.prevent="submitNewPost">
          <div class="form-group">
            <label>关联单词 (可选)</label>
            <input type="text" placeholder="输入要讨论的单词..." v-model="newPost.word">
          </div>
          <div class="form-group">
            <label>帖子标题</label>
            <input type="text" placeholder="输入标题..." v-model="newPost.title" required>
          </div>
          <div class="form-group">
            <label>帖子内容</label>
            <textarea placeholder="详细描述你的问题或分享..." v-model="newPost.content" rows="6" required></textarea>
          </div>
          <div class="form-group">
            <label>选择分类</label>
            <select v-model="newPost.category">
              <option v-for="category in wordCategories" :value="category.id">{{ category.name }}</option>
            </select>
          </div>
          <div class="form-actions">
            <button type="button" class="btn outline" @click="showNewPost = false">取消</button>
            <button type="submit" class="btn primary">发布</button>
          </div>
        </form>
      </div>
    </Modal>
  </div>
</template>

<script setup>
import { ref, computed, inject } from 'vue';
import Modal from './Modal.vue';

// 主题功能
const theme = inject("theme", ref('light'));
const toggleTheme = () => {
  theme.value = theme.value === 'light' ? 'dark' : 'light';
};

// 单词分类数据
const wordCategories = ref([
  { id: 'all', name: '全部词汇', count: 128 },
  { id: 'cet4', name: '四级词汇', count: 45 },
  { id: 'cet6', name: '六级词汇', count: 32 },
  { id: 'ielts', name: '雅思词汇', count: 28 },
  { id: 'toefl', name: '托福词汇', count: 19 },
  { id: 'gre', name: 'GRE词汇', count: 15 },
  { id: 'business', name: '商务英语', count: 12 },
]);

const activeCategory = ref('all');
const activeCategoryName = computed(() => {
  const cat = wordCategories.value.find(c => c.id === activeCategory.value);
  return cat ? cat.name : '全部词汇';
});

// 今日推荐词汇
const dailyWords = ref([
  {
    id: 1,
    term: 'ephemeral',
    definition: 'lasting for a very short time',
    level: 'advanced',
    examples: 3
  },
  {
    id: 2,
    term: 'ubiquitous',
    definition: 'present, appearing, or found everywhere',
    level: 'advanced',
    examples: 5
  },
  {
    id: 3,
    term: 'eloquent',
    definition: 'fluent or persuasive in speaking or writing',
    level: 'intermediate',
    examples: 4
  }
]);

// 帖子数据
const posts = ref([
  {
    id: 1,
    title: '如何高效记忆"ambiguous"这个单词？',
    word: 'ambiguous',
    excerpt: '这个单词总是记不住，大家有什么好的记忆方法可以分享吗？',
    category: 'cet6',
    votes: 24,
    comments: 8,
    date: new Date('2023-05-15'),
    author: {
      name: '单词小达人',
      avatar: 'https://i.pravatar.cc/40?img=1'
    }
  },
  {
    id: 2,
    title: '"ephemeral"和"transient"有什么区别？',
    word: 'ephemeral',
    excerpt: '这两个词都表示短暂的意思，但在用法上有什么区别呢？求大神解答！',
    category: 'gre',
    votes: 18,
    comments: 5,
    date: new Date('2023-05-12'),
    author: {
      name: '英语学习者',
      avatar: 'https://i.pravatar.cc/40?img=2'
    }
  },
  {
    id: 3,
    title: '分享一个记忆"ubiquitous"的小技巧',
    word: 'ubiquitous',
    excerpt: '我发现通过词根记忆法可以很好地记住这个单词，分享给大家...',
    category: 'ielts',
    votes: 32,
    comments: 12,
    date: new Date('2023-05-10'),
    author: {
      name: '记忆大师',
      avatar: 'https://i.pravatar.cc/40?img=3'
    }
  },
  {
    id: 4,
    title: '商务英语中常用的50个高级词汇',
    word: '',
    excerpt: '整理了商务场景中常用的高级词汇列表，希望对大家有帮助...',
    category: 'business',
    votes: 15,
    comments: 3,
    date: new Date('2023-05-08'),
    author: {
      name: '商务英语专家',
      avatar: 'https://i.pravatar.cc/40?img=4'
    }
  },
  {
    id: 5,
    title: '商务英语中常用的50个高级词汇',
    word: '',
    excerpt: '整理了商务场景中常用的高级词汇列表，希望对大家有帮助...',
    category: 'business',
    votes: 15,
    comments: 3,
    date: new Date('2023-05-08'),
    author: {
      name: '商务英语专家',
      avatar: 'https://i.pravatar.cc/40?img=4'
    }
  },
  {
    id: 6,
    title: '商务英语中常用的50个高级词汇',
    word: '',
    excerpt: '整理了商务场景中常用的高级词汇列表，希望对大家有帮助...',
    category: 'business',
    votes: 15,
    comments: 3,
    date: new Date('2023-05-08'),
    author: {
      name: '商务英语专家',
      avatar: 'https://i.pravatar.cc/40?img=4'
    }
  }
]);

// 帖子筛选和排序
const searchQuery = ref('');
const sortBy = ref('newest');
const currentPage = ref(1);
const pageSize = 5;

const filteredPosts = computed(() => {
  let result = [...posts.value];

  // 按分类筛选
  if (activeCategory.value !== 'all') {
    result = result.filter(post => post.category === activeCategory.value);
  }

  // 搜索筛选
  if (searchQuery.value) {
    const query = searchQuery.value.toLowerCase();
    result = result.filter(post =>
      post.title.toLowerCase().includes(query) ||
      (post.word && post.word.toLowerCase().includes(query))
    );
  }

  // 排序
  switch (sortBy.value) {
    case 'newest':
      result.sort((a, b) => b.date - a.date);
      break;
    case 'popular':
      result.sort((a, b) => b.comments - a.comments);
      break;
    case 'votes':
      result.sort((a, b) => b.votes - a.votes);
      break;
  }

  // 分页
  const start = (currentPage.value - 1) * pageSize;
  return result.slice(start, start + pageSize);
});

const totalPages = computed(() => {
  return Math.ceil(posts.value.length / pageSize);
});

// 帖子投票
const votePost = (postId, direction) => {
  const post = posts.value.find(p => p.id === postId);
  if (post) {
    post.votes += direction === 'up' ? 1 : -1;
  }
};

// 时间格式化
const formatTime = (date) => {
  return date.toLocaleDateString('zh-CN', {
    month: 'short',
    day: 'numeric'
  });
};

// 登录/注册逻辑
const showLogin = ref(false);
const showRegister = ref(false);

const loginForm = ref({
  email: '',
  password: ''
});

const registerForm = ref({
  username: '',
  email: '',
  password: ''
});

const handleLogin = () => {
  console.log('登录:', loginForm.value);
  showLogin.value = false;
};

const handleRegister = () => {
  console.log('注册:', registerForm.value);
  showRegister.value = false;
  showLogin.value = true;
};

// 新建帖子
const showNewPost = ref(false);
const newPost = ref({
  word: '',
  title: '',
  content: '',
  category: 'all'
});

const submitNewPost = () => {
  const post = {
    id: posts.value.length + 1,
    title: newPost.value.title,
    word: newPost.value.word,
    excerpt: newPost.value.content.substring(0, 60) + '...',
    category: newPost.value.category,
    votes: 0,
    comments: 0,
    date: new Date(),
    author: {
      name: 'admin',
      avatar: 'https://i.pravatar.cc/40'
    }
  };

  posts.value.unshift(post);
  showNewPost.value = false;
  newPost.value = {
    word: '',
    title: '',
    content: '',
    category: 'all'
  };
};
</script>

<style scoped>
/* 基础样式 */
.word-forum {
  min-height: 100vh;
  background-color: var(--bg-color);
  color: var(--text-color);
  transition: all 0.3s ease;
}

.word-forum.light {
  --bg-color: #f8f9fa;
  --text-color: #333;
  --primary-color: #4361ee;
  --secondary-color: #6c757d;
  --border-color: #e1e4e8;
  --card-bg: #fff;
  --hover-bg: #f1f3f5;
  --shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
}

.word-forum.dark {
  --bg-color: #1a1a1a;
  --text-color: #e0e0e0;
  --primary-color: #4895ef;
  --secondary-color: #8e8e8e;
  --border-color: #333;
  --card-bg: #2d2d2d;
  --hover-bg: #383838;
  --shadow: 0 2px 8px rgba(0, 0, 0, 0.3);
}

/* 头部样式 */
.forum-header {
  background-color: var(--card-bg);
  box-shadow: var(--shadow);
  position: sticky;
  top: 0;
  z-index: 100;
  border-bottom: 1px solid var(--border-color);
}

.header-container {
  max-width: 1200px;
  margin: 0 auto;
  padding: 1rem;
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.logo {
  display: flex;
  align-items: center;
  gap: 0.5rem;
}

.word-icon {
  font-size: 1.8rem;
}

.logo h1 {
  font-size: 1.5rem;
  margin: 0;
  color: var(--primary-color);
}

.main-nav {
  display: flex;
  gap: 1.5rem;
}

.main-nav a {
  color: var(--text-color);
  text-decoration: none;
  font-weight: 500;
  padding: 0.5rem 0;
  position: relative;
}

.main-nav a:hover {
  color: var(--primary-color);
}

.main-nav a.router-link-active {
  color: var(--primary-color);
}

.main-nav a.router-link-active::after {
  content: '';
  position: absolute;
  bottom: 0;
  left: 0;
  width: 100%;
  height: 2px;
  background-color: var(--primary-color);
}

.user-controls {
  display: flex;
  gap: 1rem;
  align-items: center;
}

.theme-toggle {
  background: none;
  border: none;
  font-size: 1.2rem;
  cursor: pointer;
  color: var(--text-color);
  padding: 0.5rem;
}

/* 按钮样式 */
.btn {
  padding: 0.5rem 1rem;
  border-radius: 6px;
  font-weight: 500;
  cursor: pointer;
  transition: all 0.2s;
  border: 1px solid transparent;
}

.btn.primary {
  background-color: var(--primary-color);
  color: white;
}

.btn.primary:hover {
  background-color: #3a56c4;
}

.btn.outline {
  background-color: transparent;
  border-color: var(--secondary-color);
  color: var(--secondary-color);
}

.btn.outline:hover {
  background-color: var(--hover-bg);
}

.btn.full-width {
  width: 100%;
}

/* 主体布局 */
.forum-container {
  max-width: 1200px;
  margin: 2rem auto;
  padding: 0 1rem;
  display: flex;
  gap: 2rem;
}

.sidebar {
  flex: 0 0 280px;
}

.post-area {
  flex: 1;
}

/* 侧边栏样式 */
.sidebar-section {
  background-color: var(--card-bg);
  border-radius: 10px;
  padding: 1.5rem;
  margin-bottom: 1.5rem;
  box-shadow: var(--shadow);
}

.sidebar-section h3 {
  margin-top: 0;
  margin-bottom: 1rem;
  font-size: 1.1rem;
  color: var(--primary-color);
  display: flex;
  align-items: center;
}

.sidebar-section h3::before {
  content: '';
  display: inline-block;
  width: 4px;
  height: 16px;
  background-color: var(--primary-color);
  margin-right: 0.5rem;
  border-radius: 2px;
}

.category-list {
  list-style: none;
  padding: 0;
  margin: 0;
}

.category-list li {
  padding: 0.75rem 0;
  cursor: pointer;
  display: flex;
  justify-content: space-between;
  align-items: center;
  border-bottom: 1px solid var(--border-color);
  transition: all 0.2s;
}

.category-list li:hover {
  color: var(--primary-color);
}

.category-list li.active {
  color: var(--primary-color);
  font-weight: 500;
}

.post-count {
  background-color: var(--hover-bg);
  color: var(--secondary-color);
  border-radius: 10px;
  padding: 0.2rem 0.5rem;
  font-size: 0.8rem;
}

.word-of-the-day {
  display: flex;
  flex-direction: column;
  gap: 1rem;
}

.word-card {
  background-color: var(--hover-bg);
  padding: 1rem;
  border-radius: 8px;
  transition: transform 0.2s;
}

.word-card:hover {
  transform: translateY(-3px);
}

.word-card h4 {
  margin: 0 0 0.5rem;
  font-size: 1.1rem;
  color: var(--primary-color);
}

.definition {
  margin: 0.5rem 0;
  font-size: 0.9rem;
  color: var(--secondary-color);
}

.word-meta {
  display: flex;
  justify-content: space-between;
  font-size: 0.8rem;
}

.level {
  padding: 0.2rem 0.5rem;
  border-radius: 4px;
  font-weight: 500;
}

.level.beginner {
  background-color: #d1fae5;
  color: #065f46;
}

.level.intermediate {
  background-color: #bfdbfe;
  color: #1e40af;
}

.level.advanced {
  background-color: #fecaca;
  color: #991b1b;
}

.examples {
  color: var(--secondary-color);
}

/* 帖子区域样式 */
.post-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 1.5rem;
}

.post-header h2 {
  margin: 0;
  font-size: 1.5rem;
}

.post-filters {
  display: flex;
  justify-content: space-between;
  margin-bottom: 1.5rem;
  gap: 1rem;
}

.filter-group {
  display: flex;
  align-items: center;
  gap: 0.5rem;
}

.filter-group select {
  padding: 0.5rem;
  border-radius: 6px;
  border: 1px solid var(--border-color);
  background-color: var(--card-bg);
  color: var(--text-color);
}

.search-box {
  display: flex;
  align-items: center;
  background-color: var(--card-bg);
  border-radius: 6px;
  overflow: hidden;
  border: 1px solid var(--border-color);
}

.search-box input {
  padding: 0.5rem 1rem;
  border: none;
  background: transparent;
  color: var(--text-color);
  outline: none;
  width: 200px;
}

.search-btn {
  background: none;
  border: none;
  padding: 0 0.5rem;
  cursor: pointer;
  color: var(--secondary-color);
}

/* 帖子列表样式 */
.post-list {
  display: flex;
  flex-direction: column;
  gap: 1rem;
}

.post {
  display: flex;
  background-color: var(--card-bg);
  border-radius: 10px;
  overflow: hidden;
  box-shadow: var(--shadow);
  transition: transform 0.2s;
}

.post:hover {
  transform: translateY(-3px);
}

.vote-section {
  flex: 0 0 60px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: flex-start;
  padding: 1rem;
  background-color: var(--hover-bg);
}

.vote-btn {
  background: none;
  border: none;
  font-size: 1.2rem;
  cursor: pointer;
  color: var(--secondary-color);
  transition: color 0.2s;
  width: 24px;
  height: 24px;
  display: flex;
  align-items: center;
  justify-content: center;
}

.vote-btn.up:hover {
  color: #4cc9f0;
}

.vote-btn.down:hover {
  color: #f72585;
}

.vote-count {
  font-weight: bold;
  margin: 0.3rem 0;
  font-size: 1.1rem;
}

.post-content {
  flex: 1;
  padding: 1.5rem;
}

.post-title {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  margin: 0 0 0.5rem;
  text-decoration: none;
  color: var(--text-color);
}

.post-title h3 {
  margin: 0;
  font-size: 1.2rem;
}

.word-tag {
  background-color: var(--hover-bg);
  color: var(--primary-color);
  font-size: 0.8rem;
  padding: 0.2rem 0.5rem;
  border-radius: 4px;
}

.post-excerpt {
  margin: 0.5rem 0;
  color: var(--secondary-color);
  line-height: 1.5;
}

.post-footer {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-top: 1rem;
}

.author-info {
  display: flex;
  align-items: center;
  gap: 0.5rem;
}

.avatar {
  width: 32px;
  height: 32px;
  border-radius: 50%;
  object-fit: cover;
}

.author-name {
  font-size: 0.9rem;
  font-weight: 500;
}

.post-meta {
  display: flex;
  gap: 1rem;
  font-size: 0.8rem;
  color: var(--secondary-color);
}

.comments {
  display: flex;
  align-items: center;
  gap: 0.2rem;
}

.time {
  font-size: 0.8rem;
}

/* 分页样式 */
.pagination {
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 1rem;
  margin-top: 2rem;
}

/* 模态框样式 */
.auth-modal,
.post-modal {
  padding: 2rem;
  max-width: 400px;
  width: 100%;
}

.auth-modal h2,
.post-modal h2 {
  margin-top: 0;
  text-align: center;
  color: var(--primary-color);
}

.form-group {
  margin-bottom: 1.5rem;
}

.form-group label {
  display: block;
  margin-bottom: 0.5rem;
  font-weight: 500;
}

.form-group input,
.form-group textarea,
.form-group select {
  width: 100%;
  padding: 0.75rem;
  border: 1px solid var(--border-color);
  border-radius: 6px;
  background-color: var(--card-bg);
  color: var(--text-color);
  font-size: 1rem;
}

.form-group textarea {
  resize: vertical;
  min-height: 120px;
}

.form-actions {
  display: flex;
  justify-content: flex-end;
  gap: 1rem;
  margin-top: 1.5rem;
}

.auth-footer {
  text-align: center;
  margin-top: 1.5rem;
  font-size: 0.9rem;
}

.auth-footer a {
  color: var(--primary-color);
  text-decoration: none;
}

/* 响应式设计 */
@media (max-width: 768px) {
  .forum-container {
    flex-direction: column;
  }

  .sidebar {
    flex: 1;
    width: 100%;
  }

  .header-container {
    flex-direction: column;
    gap: 1rem;
  }

  .main-nav {
    gap: 1rem;
  }

  .post-filters {
    flex-direction: column;
  }

  .search-box input {
    width: 100%;
  }
}
</style>